<template>
    <div style="background: #111214;color:#fff;min-height:100vh; width: 100%;">
        <div class="box-login" >
            <div style="margin-top:15px;display: flex;justify-content: center;">
                <div>
                    <img src="../assets/img/Z.svg" alt="">
                    <img style='width: 160px;height: 43px;position: relative;top: -71px;left: calc(50% - 80px);' src="../assets/img/logo.png" alt="">
                </div>
            </div>
            <div style="text-align: left;">
                <div style="color: #fff;font-size: 16px;margin-top:15px;">手机号</div>
                <div style="position: relative;">
                    <input @focus="utils.blursCli" class="inputSty" v-model="phoneName" type="text" placeholder="请输入手机号">
                </div>
                <div v-if="showNote" style="color: #fff;font-size: 16px;margin-top:25px;">登录密码</div>
                <div v-if="showNote" style="position: relative;">
                    <input @focus="utils.blursCli" class="inputSty" v-model="passwordName" type="password" placeholder="请输入登录密码">
                </div>
                <div v-if="!showNote" style="color: #fff;font-size: 16px;margin-top:25px;">验证码</div>
                <div v-if="!showNote" style="position: relative;">
                    <input @focus="utils.blursCli" class="inputSty" v-model="verificationCode" type="text" placeholder="请输入验证码">
                    <span v-show="showCode" style="position: absolute;right:0;top: 23px;color:#6E59FF;font-size: 16px;" @click="stempCli">获取验证码</span>
                    <span v-show="!showCode" style="position: absolute;right:0;top: 23px;color:#6E59FF;font-size: 14px;">
                        {{numTime}}s 
                        <span style="color:#fff;">后重新获取</span>
                    </span>
                </div>
                <div style="display: flex;justify-content: space-between;">
                   <button @click="registerCli" class="btn">登录</button>
                </div>
                <div style="display: flex;justify-content: space-between;">
                    <button v-if="!showNote" @click="cutCli(true)" class="btnd">帐号密码登录</button>
                    <button v-else @click="cutCli(false)" class="btnd">短信验证码登录</button>
                 </div>
                 <div style="position: absolute;bottom: 20px;width: 100%;left: 0px;" v-show="hidshow">
                     <div style="text-align: center;color:rgba(255, 255, 255, .6);font-size: 16px;text-decoration: underline;" @click="jumpDown">
                         立即注册
                     </div>
                     <div style="text-align: center;font-size: 12px;margin-top:30px;">
                         <!-- <van-checkbox style="display: inline-block;position: relative;top: 2px;" icon-size="15px" v-model="checked" checked-color="#FF2E67"></van-checkbox> -->
                         <span style="color: rgba(255,255,255,.6);">登录表示您同意</span>
                         <span style="color: #6E59FF;">《用户协议》</span>
                         <span style="color: rgba(255,255,255,.6);">和</span>
                         <span style="color: #6E59FF;">《隐私协议》</span>
                     </div>
                 </div>
           </div>
        </div>
    </div>

  </template>

  <script>
  import { Toast } from 'vant'
  import $ from 'jquery'
  export default {
    name: 'login',
    data () {
      return {
        verificationCode:'',
        phoneName:'',
        showCode: true,
        numTime: 60,
        showNote: false,
        passwordName:'',
        docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
        showHeight: document.documentElement.clientHeight,   //实时屏幕高度
        hidshow:true  //显示或者隐藏footer
      }
    },

    computed: {

    },
    watch: {
        showHeight:function() {
            if(this.docmHeight > this.showHeight){
                this.hidshow=false
            }else{
                this.hidshow=true
            }
        }
    },
    mounted() {
        // window.onresize监听页面高度的变化
        window.onresize = ()=>{
            return(()=>{
                this.showHeight = document.body.clientHeight;
            })()
        }
        if(localStorage.getItem('z_token')){
            this.$router.replace('/')
        }
    },
    methods: {
        jumpDown(){
            this.$router.push('/register/id')
        },
        stempCli(){
            if(!this.utils.checkPhone(this.phoneName)){
                Toast('手机号格式错误！');
                return
            }
            this.showCode = false;
            var list={
                phone:this.phoneName
            };
            this.numTime = 60;
            this.$http.post(this.utils.config+"/gz/pub/send_code?phone="+this.phoneName+"&type=LOGIN").then((data)=>{})
            var setTime = setInterval(()=>{
                if(this.numTime == 1){
                    clearInterval(setTime);
                    this.showCode = true;
                }else{
                    this.numTime--
                }
            },1000)
        },
        registerCli(){
            if(!this.utils.checkPhone(this.phoneName)){
                Toast('手机号格式错误！');
                return
            }
            if(this.showNote){
                if(!this.passwordName){
                    Toast('请输入登陆密码！');
                    return
                }
                var url='/gz/pub/login_pwd';
                var list={
                    phone:this.phoneName,
                    password:this.$md5(this.passwordName)
                }
            }else{
                if(!this.verificationCode){
                    Toast('请输入手机验证码！');
                    return
                }
                var url='/gz/pub/login_code';
                var list={
                    phone:this.phoneName,
                    code:this.verificationCode
                }
            }
            this.$http.post(this.utils.config+url,list).then((data)=>{
                Toast(data.data.msg);
                if(data.data.success){
                    this.$router.replace('/');
                    localStorage.setItem('z_token',data.data.data.token);
                }
            })
        },
        cutCli(str){
            this.showNote = str;
        }
    },
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
      .box-login{
          padding-top:  20px;
          margin: 0 20px;
      }
      .btn{
        width:100%;
        height:56px;
        color:#fff;
        margin-top:50px;
        background: #6E59FF;
        border:none;
        border-radius: 6px;
        font-size: 16px;
        font-weight: bold;
      }
      .btnd{
        width:100%;
        height:56px;
        color:#6E59FF;
        margin-top:11px;
        background: rgba(0,0,0,0);
        border:1px solid #6E59FF;
        border-radius: 6px;
        font-size: 16px;
        font-weight: bold; 
      }
  </style>
